<template>
  <div :ref="drag" class="item-box">{{ name }}</div>
</template>

<script setup>
import { useDrag } from 'vue3-dnd'

const props = defineProps({
  name: {
    type: String,
    default: ''
  }
})

const [_, drag] = useDrag(() => ({
  type: props.name,
  item: { type: props.name, name: props.name }
}))
</script>

<style scoped>
.item-box {
  margin: 0 12px 12px 0;
  width: 100px;
  height: 42px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: move;
}
</style>
